<template>
  <div class="base-container">
    <t-form ref="form" :data="queryParams" label-width="80" @submit="search">
      <t-row style="margin-bottom: 10px;">
        <t-col :span="3">
          <t-form-item label="填表年份" name="years">
            <t-select clearable v-model="queryParams.years" :options="years" placeholder="请选择填表年份" />
          </t-form-item>
        </t-col>
        <t-col :span="5" :offset="1">
          <t-form-item label="填表单位" name="deptName">
            <t-input clearable style="width: 400px" v-model="queryParams.deptName" placeholder="请输入填表单位" />
          </t-form-item>
        </t-col>
        <t-col :span="1" :offset="2" class="operation-container">
          <t-button theme="primary" type="submit">查询</t-button>
          <t-button theme="default" variant="outline" type="reset">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <t-table rowKey="id" :data="formData" :columns="columns" :pagination="pagination">
      <!-- 单位基本信息 -->
      <template #DWJBXX-institutional="{ row: { institutional }}">
        {{institutional|filterByDict(dict.type.institutional)}}
      </template>
      <template #DWJBXX-hightechEnterprise="{ row: { hightechEnterprise }}">
        <t-switch
          size="large"
          disabled
          :defaultValue="hightechEnterprise"
          :label="['是', '否']"
          :customValue="['1', '0']"
        ></t-switch>
      </template>
      <template #DWJBXX-technologyEnterprise="{ row: { technologyEnterprise }}">
        <t-switch
          size="large"
          disabled
          :defaultValue="technologyEnterprise"
          :label="['是', '否']"
          :customValue="['1', '0']"
        ></t-switch>
      </template>
      <!-- 交通运输科技项目 -->
      <template #JTYSKJXM-xmgs="{ row: { projectDetails }}">
        {{projectDetails?projectDetails.length:0}}
      </template>
      <template #op="{ row }">
        <t-button @click="handleShow(row)" size="small" variant="text" class="t-button-link" theme="success">
          <t-icon name="browse" slot="icon" />
          详情
        </t-button>
      </template>
    </t-table>
    <div v-if="$route.query.code === 'DWJBXX'">
      <tab-unit-base-info-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'RYGM'">
      <tab-personnel-size-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'KYTJ'">
      <tab-research-conditions-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'JTYSYJKFJFZC'">
      <tab-research-and-development-expenditure-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'JTYSKJXM'">
      <tab-technology-projec-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'JTYSKJCG'">
      <tab-technological-achievements-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'GJKJHZYJL'">
      <tab-cooperation-and-communication-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'JTHYZDSYS'">
      <tab-key-laboratory-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
    <div v-if="$route.query.code === 'BZHQK'">
      <tab-standardization-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="dialog.selectFormId"
        :edit="false"
      />
    </div>
  </div>
</template>

<script lang="jsx">
import TabUnitBaseInfoForm from '../TabUnitBaseInfo/form.vue';
import TabPersonnelSizeForm from '../TabPersonnelSize/form.vue';
import TabResearchConditionsForm from '../TabResearchConditions/form.vue';
import TabResearchAndDevelopmentExpenditureForm from '../TabResearchAndDevelopmentExpenditure/form.vue';
import TabTechnologyProjecForm from '../TabTechnologyProjec/form.vue';
import TabTechnologicalAchievementsForm from '../TabTechnologicalAchievements/form.vue';
import TabCooperationAndCommunicationForm from '../TabCooperationAndCommunication/form.vue';
import TabKeyLaboratoryForm from '../TabKeyLaboratory/form.vue';
import TabStandardizationForm from '../TabStandardization/form.vue';

import { treeselect } from '@/api/system/dept'
import { curYear, genYears } from '../genYears.js'

export default {
  name: 'forms',
  components: {
    TabUnitBaseInfoForm,
    TabPersonnelSizeForm,
    TabResearchConditionsForm,
    TabResearchAndDevelopmentExpenditureForm,
    TabTechnologyProjecForm,
    TabTechnologicalAchievementsForm,
    TabCooperationAndCommunicationForm,
    TabKeyLaboratoryForm,
    TabStandardizationForm
  },
  dicts: ['institutional'],
  data() {
    return {
      depts: [],
      tables: [],
      years: genYears(),
      queryParams: {
        deptName: '',
        years: curYear,
        tableCode: 'DWJBXX'
      },
      formData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10
      },
      dialog: {
        open_info_detail: false,
        selectFormId: -1
      },
    }
  },
  computed: {
    columns() {
      let columns =[]
      switch (this.$route.query.code) {
      case 'DWJBXX':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'institutional', title: '机构性质', align: 'center', cell: 'DWJBXX-institutional' },
          { colKey: 'hightechEnterprise', title: '是否是高新技术企业', align: 'center', cell: 'DWJBXX-hightechEnterprise' },
          { colKey: 'technologyEnterprise', title: '是否是科技型中小企业', align: 'center', cell: 'DWJBXX-technologyEnterprise' },
        ]
        break;
      case 'RYGM':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'jtyscy', title: '交通运输从业人员数量', align: 'center' },
          { colKey: 'jtyskjhd', title: '交通运输科技活动人员数量', align: 'center' },
          { colKey: 'jtyskf', title: '交通运输开发人员数量', align: 'center' },
        ]
        break;
      case 'KYTJ':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'jtyskyyq', title: '交通运输科研仪器设备数量', align: 'center' },
          { colKey: 'jtyskyyqxz', title: '当年新增科研仪器设备数量', align: 'center' },
          { colKey: 'jtyskysyshyfzx', title: '交通运输科研实验室和研发中心总数量', align: 'center' },
        ]
        break;
      case 'JTYSYJKFJFZC':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'jtysyjkfjfnbzc', title: '交通运输研究开发经费内部支出', align: 'center' },
          { colKey: 'jtysyjkfjfzc', title: '交通运输研究开发经常费支出', align: 'center' },
          { colKey: 'jtysyjkfjbjsf', title: '交通运输研究开发基本建设费', align: 'center' },
        ]
        break;
      case 'JTYSKJXM':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'xmgs', title: '项目个数', align: 'center', cell: 'JTYSKJXM-xmgs' },
        ]
        break;
      case 'JTYSKJCG':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'fbkjlws', title: '发表科技论文数(篇)', align: 'center' },
          { colKey: 'cbzzs', title: '出版著作数(部)', align: 'center' },
          { colKey: 'zlsqsls', title: '专利申请受理数(项)', align: 'center' },
          { colKey: 'zlsqs', title: '专利授权数(项)', align: 'center' },
        ]
        break;
      case 'GJKJHZYJL':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'cfrc', title: '出访人次(人次)', align: 'center' },
          { colKey: 'jdlfrc', title: '接待来访人次(人次)', align: 'center' },
          { colKey: 'rcyjsl', title: '人才引进数量(人)', align: 'center' },
          { colKey: 'xmhzsl', title: '项目合作数量(人)', align: 'center' },
        ]
        break;
      case 'JTHYZDSYS':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'ryzs', title: '人员总数(人)', align: 'center' },
          { colKey: 'sysmj', title: '实验室面积(平方米)', align: 'center' },
          { colKey: 'sbzlsl', title: '设备总量(台/套)', align: 'center' },
          { colKey: 'sbzlzz', title: '设备总值(万元)', align: 'center' },
        ]
        break;
      case 'BZHQK':
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
          { colKey: 'bzhjfztr', title: '标准化经费总投入(万元)', align: 'center' },
          { colKey: 'zfbk', title: '政府拨款(万元)', align: 'center' },
          { colKey: 'qytr', title: '企业投入(万元)', align: 'center' },
          { colKey: 'qtly', title: '其他来源(万元)', align: 'center' },
        ]
        break;
      default:
        columns = [
          { colKey: 'deptName', title: '填表单位名称' },
        ]
        break;
      }
      columns.push({ colKey: 'op', title: '操作', align: 'center' })
      return columns
    }
  },
  async created() {
    // await this.initData()
    await this.search()
  },
  methods: {
    async initData() {
      try {
        const { data } = await treeselect()
        this.depts = data
        const { rows } = await this.$api.kjtjdc.table.getTableList()
        const tables = rows.reduce((pre, cur) => {
          pre.push({ value: cur.code, label: cur.name })
          return pre
        }, [])
        this.queryParams.tableCode = tables[0].value
        this.tables = tables
      } catch (e) {
        this.$message.error(e)
      }
    },
    async search() {
      const { queryParams, $route, pagination } = this
      let apiKey
      switch ($route.query.code) {
      case 'DWJBXX':
        apiKey = 'unitInfo'
        break;
      case 'RYGM':
        apiKey = 'personInfo'
        break;
      case 'KYTJ':
        apiKey = 'researchCondition'
        break;
      case 'JTYSYJKFJFZC':
        apiKey = 'devFundingSpend'
        break;
      case 'JTYSKJXM':
        apiKey = 'projectInfo'
        break;
      case 'JTYSKJCG':
        apiKey = 'resultInfo'
        break;
      case 'GJKJHZYJL':
        apiKey = 'cooperationInfo'
        break;
      case 'JTHYZDSYS':
        apiKey = 'labInfo'
        break;
      case 'BZHQK':
        apiKey = 'standardizedInfo'
        break;
      default:
        apiKey = 'unitInfo'
        break;
      }
      try {
        const { rows, total } = await this.$api.kjtjdc.table[apiKey].getAll({
          deptName: queryParams.deptName,
          years: queryParams.years,
          pageSize: pagination.pageSize,
          pageNum: pagination.current
        })
        this.formData = rows
        this.pagination.total = total
      } catch (e) {
        this.$message.error(e)
      }
    },
    handleShow(row) {
      this.dialog.open_info_detail = true
      this.dialog.selectFormId = row.id
    },
    onReload() {
      this.search()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
